<div class="user_container">
  <div class="row">
    <div class="col-1">
      <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleModal" class='add'>添加</button>
    </div>
    <div class="col-2">
      <form>
        <div class="form-group">
          <input type="username" class="form-control user_search_text" id="exampleFormControlInput1" placeholder="请输入用户名">
        </div>
      </form>
    </div>
    <div class="col-2">
      <form>
        <div class="form-group" >
          <select class="form-control user_search_text" id="exampleFormControlSelect1" >
            <option class="val">请选择角色</option>
          </select>
        </div>
      </form>
    </div>
    <div class="col-1">
      <button type="button" class="btn btn-link user_search">搜索</button>
    </div>
  </div>
  <table class="table table-sm">
    <thead>
      <tr>
        <th scope="col-1">序号</th>
        <th scope="col-1">用户名</th>
        <th scope="col-1">姓名</th>
        <th scope="col-1">角色</th>
        <th scope="col-2">性别</th>
        <th scope="col-2">状态</th>
        <th scope="col-1">手机号</th>
        <th scope="col-3">操作</th>

      </tr>
    </thead>
    <tbody>
  
    </tbody>
  </table>
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item num">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      
      <!-- <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li> -->
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
  <!--添加模态框使用-->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
		  <div class="modal-content">
			<div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel">添加用户信息</h4>
			  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			  
			</div>
			<div class="modal-body">
			  <form class="form-horizontal">
				<div class="form-group">
				  <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
				  <div class="col-sm-10">
					<input type="text" class="form-control" id="username" placeholder="用户名" >
				  </div>
				</div>
				<div class="form-group">
				  <label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
				  <div class="col-sm-10">
					<input type="text" class="form-control" id="realname" placeholder="name">
				  </div>
				</div>
				<div class="form-group">
				  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
				  <div class="col-sm-10">
					<input type="password" class="form-control" id="password" placeholder="Password">
				  </div>
				</div>
				<div class="form-group">
				  <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
				  <div class="col-sm-10">
					<div class="radio">
					<label>
					  <input type="radio" name="optionsRadios" id="man" value="男" checked class="gender">男
					</label> &nbsp;&nbsp;
					<label>
					  <input type="radio" name="optionsRadios" id="woman" value="女" class="gender">
					  女
					</label>
				  </div>
				  </div>
				</div>
				<div class="form-group">
				  <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
				  <div class="col-sm-10">
					<input type="text" class="form-control" id="telephone" placeholder="tel">
				  </div>
				</div>
				<div class="form-group">
					 <label for="inputPassword3" class="col-sm-2 control-label">生日</label>
				  <div class="col-sm-10">
					<input type="text" class="form-control" id="birth" placeholder="date">
				  </div>
				</div>
			  </form>
			</div>
			<div class="modal-footer">
			  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			  <button type="button" class="btn btn-default addOk">确定</button>
			</div>
		  </div>
		</div>
	</div>
    <!--添加模态框结束-->
    <!--设置模态框-->
		<div class="modal fade szmd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel">设置角色</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
              <div class="col-sm-10">
              <input type="email" class="form-control flag" id="inputEmail3" placeholder="用户名" readonly value="">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">角色</label>
              <div class="col-sm-10">
                <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 学生
                </label>
                <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 教师
                </label>
                <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 管理员
                </label>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-default">确定</button>
        </div>
        </div>
      </div>
      </div>
        <!--设置模态框结束-->
</div>
<style>
  
</style>
<!-- js部分 -->
<script>
  //声明全局变量
  var id;
  var baseUrl='http://182.92.83.218:7788/'
  var currentPage=1;//默认当前页为1
  var pageSize=10;//默认页面大小为10
  var username='';
  var rolename='请选择角色';
  

  //通过promise封装请求函数
  function getData(type,url,res){
    var p=new Promise((resolve,reject)=>{
      //发送异步请求
      $.ajax({
        url:url,
        type:type,
        headers:{
          "Authorization":sessionStorage.getItem('token')
        },
        data:res,
        success:function(data){
          //基于每次请求处理的数据不一样，所以不能在这直接进行数据处理
          resolve(data);
        }
      })
    })
    return p;
  }
  //1.发送请求-请求角色信息
  getData('GET',baseUrl+'role/findAll').then(function(data){
    //数据处理
    // console.log(data);
    data.data.forEach((item)=>{
      $('.user_container .val').after(`<option>`+item.name+`</option>`)
    })
  })
  //封装数据处理函数
  function getUserData(url){
    //2.请求所有用户数据-》根据分页
      return getData('GET',baseUrl+url).then(function(data){
        // console.log(data)
        //清空所有分页按钮
        if($('.clicknum').length>0){
          $('.clicknum').remove();
        }
        //根据用户总量设置分页按钮
        var num=Math.ceil((data.data.total)/pageSize);
        for(var i=num;i>0;i--){
          $('.user_container .num').after(`<li class="page-item clicknum"><a class="page-link" href="#">`+i+`</a></li>`)
        }
        //给分页按钮绑定事件
        $('.clicknum').click((event)=>{
          currentPage=($(event.target).text()); 
          getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);
        })

        //先清空tbody元素
        $('.user_container tbody').empty();
        //根据用户数据创建tr->追加tbody
        data.data.list.forEach((item)=>{
          $(".user_container tbody").append(`<tr>
            <td>`+item.id+`</td>
            <td>`+item.username+`</td>
            <td>`+item.realname+`</td>
            <td>`+item.politicsStatus+`</td>
            <td>`+item.gender+`</td>
            <td>`+item.status+`</td>
            <td>`+item.telephone+`</td>
            <td>
              <span data-toggle="modal" data-target=".szmd" class='set'>设置</span>
              <span class="deleteById">移除</span>
              <span class='details'>详情</span>
              <span data-toggle="modal" data-target="#exampleModal" class='edit'>修改</span>
            </td>
            </tr>`);
        });
        //给详情按钮绑定事件
        // $('.details').click(()=>{
        //   //页面跳转
        //   $('.content-main').load('./pages/user.html')
        // });
      })
  }

  getUserData('/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);

  //给搜索按钮绑定事件
  $('.user_container .user_search').click(()=>{
    //1.获取用户数据
    var username=$('.user_search_text').eq(0).val();
    var rolename=$('.user_search_text').eq(1).val();
    console.log(username,rolename);
    //2.判断用户输入
    if(username!='' && rolename=='请选择角色'){
      url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username;
    }else if(username=='' && rolename!='请选择角色'){
      url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&rolename='+rolename;
    }else if(username!='' && rolename!="请选择角色"){
      url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username+'&rolename='+rolename;
    }else{
      url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize;
    }
    //3.发送请求
    getUserData(url);

  })
  //给删除按钮绑定事件
  $('.user_container tbody').on('click','.deleteById',function(event){
    //获取id
    var id=$(event.target).parent().parent().children().eq(0).text();
    // console.log(id);
    getData('GET',baseUrl+'baseUser/deleteById?id='+id).then(function(data){
      if(data.status==200){
        alert(data.message);
        //刷新页面
        getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);
      }
    })
  })
  //给详情按钮绑定事件
  $('.user_container tbody').on('click','.details',function(){
    //页面跳转
    $('.content-main').load('./pages/user.html')
  })
  //给设置按钮绑定事件
  $('.user_container tbody').on('click','.set',function(event){
    var id=$(event.target).parent().parent().children().eq(0).text();
    // console.log(id);
    getData('GET',baseUrl+'baseUser/findAll').then(function(data){
      data.data.forEach(function(item){
        if(item.id==id){
          $('.user_container .flag').val(item.username);
          // console.log(item.politicsStatus);
          $('.checkbox-inline')


        }
      })
    })

  })
  $('.add').click(function(){
      $("#username").val('');
			$("#realname").val('');
			$('#password').val('');
			$("#gender").val('');
			$('#telephone').val('');
			$('#birth').val('');
  })
  //给增加保存按钮绑定事件
  $('.user_container .addOk').click(function(){
    // console.log(id)
    var username=$('.user_container #username').val();
    var realname=$('.user_container #realname').val();
    var password=$('.user_container #password').val();
    var gender;
    var radios=$('.user_container .gender')
      for(var i=0;i<radios.length;i++){
        if(radios[i].checked){
          gender=radios[i].value;
        }
      }
    var telephone=$('.user_container #telephone').val();
    var birth=$('.user_container #birth').val();
    if(id){
			var user={
        id:id,
				username:username,
				realname:realname,
				password:password,
				gender:gender,
				telephone:telephone,
        birth:birth,
			}
		}else{
			var user={
				username:username,
				realname:realname,
				password:password,
				gender:gender,
				telephone:telephone,
        birth:birth,
			}
		}
    getData('POST',baseUrl+'baseUser/saveOrUpdate',user).then(function(data){
       // 关闭模态框
       console.log(data);
				$("#exampleModal").modal("hide")
				// 重新查询栏目信息
				$('.user_container tbody').empty();
        getUserData('/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);
        console.log(user);
    })
  })
  // //查询所有用户信息
  var people;
  $.ajax({
    type:'GET',
    url:baseUrl+'baseUser/findAll',
    headers:{
        "Authorization":sessionStorage.getItem("token")
    },
    success:function(data){
      people=data.data;
      
    }
  })
  console.log(people);
  //给修改按钮绑定事件
  $('.user_container tbody').on('click','.edit',function(event){
    id=$(event.target).parent().parent().children().eq(0).text();
    // console.log(id)
    var xiugai=people.filter(function(item){
      if(item.id==id){
        // $('#id').val(item.id);
				$('#username').val(item.username);
				$('#realname').val(item.realname);
				$('#password').val(item.password);
				$('#gender').val(item.gender)
				$('#telephone').val(item.telephone)
				$('#birth').val(item.birth)
			}
    })
    return id ;
    
  })

    
  
  
</script>